import { useMemo, useState, useRef } from "react";
import { message, Popconfirm, Tag, Tabs } from "antd";
import { QueryTable } from "@/components/QueryTable";
import OperateCustomerDrawer from "../customerManage/operateCustomerDrawer";
import useCustomerChange from '@/components/_hooks/useCustomerChange';
import { customerTypeTagMapping } from '@/utils';
import { deleteCustomer } from '@/api';
import { statusArr, notFellowMapping, activeKeyProps } from '../customerManage/metaData';

import "./index.less";

export default function PublicCustomer(props) {
  const [showModal, setModal] = useState(false);
  const onFinish = (data?: any) => {
    tableRef?.current?.refreshTable()
  };

  const [openTransDrawer, customerChangeDrawer] = useCustomerChange({ callback: onFinish });
  const [editItem, setEditItem] = useState({})
  const tableRef = useRef()

  const onDrawershow = (id: any, showStatus: boolean) => {
    setModal(showStatus);
  };


  const delCustomer = (id) => {
    deleteCustomer({ id }).then((data) => {
      if (!data) return;
      message.success('删除成功');
      onFinish?.();
    })
      .catch((err) => {
        throw (err)
      });
  }

  const columns = [
    {
      dataIndex: "customerId",
      key: "customerId",
      title: "客户编号",
      ellipsis: true,
    },
    {
      dataIndex: "customerName",
      key: "customerName",
      title: "客户姓名",
      width: 100,
      ellipsis: true,
      searchConfig: {
        type: 'input',
      },
    },
    {
      dataIndex: "loanLimit",
      key: "loanLimit",
      title: "贷款额度",
    },
    {
      dataIndex: "status",
      key: "status",
      title: "客户状态",
      searchConfig: {
        type: 'select',
        selectConfig: {
          data: statusArr,
          optionValue: 'value',
          optionLabel: 'name',
        },
      },
      render: (_, record) => {
        const statusObj = customerTypeTagMapping[record?.status] ?? {}
        return (
          <Tag color={statusObj?.color}>{statusObj?.content}</Tag>
        );
      },
    },
    {
      dataIndex: "customerAddress",
      key: "customerAddress",
      title: "地址",
      ellipsis: true,
    },
    {
      dataIndex: "phone",
      key: "phone",
      title: "客户电话",
      width: 130,
    },
    {
      dataIndex: "weChat",
      key: "weChat",
      title: "微信",
    },
    {
      dataIndex: "gender",
      key: "gender",
      title: "客户性别",
      enumMapping: {
        'man': '男',
        'woman': '女'
      }
    },
    {
      dataIndex: "age",
      key: "age",
      title: "客户年龄",
    },
    // {
    //   dataIndex: "followUpStatus",
    //   key: "followUpStatus",
    //   title: "跟进状态",
    // },
    {
      dataIndex: "identityNumber",
      key: "identityNumber",
      title: "身份证号码",
      ellipsis: true,
    },
    {
      dataIndex: "action",
      key: "action",
      title: "操作",
      fixed: 'right',
      render: (_, record) => {
        return (
          <>
            <a onClick={() => openTransDrawer(record)}>
              转派
            </a>
            <br />
            <a onClick={() => {
              setModal(true)
              setEditItem(record)
            }}>
              编辑
            </a>
            <br />
            <Popconfirm
              title="客户删除"
              description="确认删除此客户吗?"
              onConfirm={() => delCustomer(record?.customerId)}
              okText="确定"
              cancelText="取消"
            >
              <a>删除</a>
            </Popconfirm>

          </>
        )
      }
    }
  ];

  const [activeKey, setActiveKey] = useState<activeKeyProps>('all')

  const tableContent = useMemo(() => {
    const info = notFellowMapping[activeKey]
    return (
      <div className="feedback-container">
        <QueryTable
          rowkey={(record) => record?.customerId}
          reqExtraParams={{ queryType: 'NOT_FOLLOW_UP', ...info }}
          ref={tableRef}
          columns={columns}
          pagingInServer
          requestUrl="/crm/customer/page"
          responseDatafield="data"
          multipleButtons={[
            {
              type: "primary",
              disabled: false,
              clickFn: () => setModal(true),
              text: "新增",
            },
          ]}
        />
      </div>
    );
  }, [activeKey])

  const items = [
    {
      key: 'all',
      label: '全部',
      children: activeKey === 'all' && tableContent,
    },
    {
      key: 'three',
      label: '3天内跟进',
      children: activeKey === 'three' && tableContent,
    },
    {
      key: 'three2seven',
      label: '3-7天未跟进',
      children: activeKey === 'three2seven' && tableContent,
    },
    {
      key: 'seven',
      label: '7天未跟进',
      children: activeKey === 'seven' && tableContent,
    },
  ]
  return (
    <>
      <Tabs
        defaultActiveKey="all"
        items={items}
        onChange={(key) => setActiveKey(key as activeKeyProps)}
      />
      {customerChangeDrawer}
      <OperateCustomerDrawer
        pageType="publcCustomer"
        setEditItem={setEditItem}
        editItem={editItem}
        isShow={showModal}
        onFinish={onFinish}
        onCancel={onDrawershow}
      />
    </>
  )
}

PublicCustomer.route = {
  [MENU_PATH]: "/public-customer/index",
};
